<template>
	<view class="bodybox" :style="'height:'+(screenHeight+46)+'px;'">
<!-- 			  <div class="logobox" style="margin-top: 130px;">
				  <u-image :showLoading="true" :fade="false" :src="logosrc" radius="0px" width="100px" height="100px"></u-image>
			  </div> -->
			  <view style="width:290px; height: 40px; margin:0 auto;margin-top: 64px;">
				<view>
					<text style="font-size: 22px;float: left;color: white;">手机密码登录</text>
					<text style="font-size: 15px;float: left;line-height:33px;text-indent:40px;color: white;" @click="verificationCode">
						使用验证码登录
					</text>
					<u-icon name="arrow-right"size="11" style="float: left;margin-top: 12px;"color="white"></u-icon>
				</view>
			  </view>
			  <view class="a_dl">
			  	<u-form :model="loginform" ref="uForm" :rules="rules">
			  		
			  		<u-form-item  prop="userPhone" class="forma">
			  			<u-input placeholder="请输入手机号" 
							prefixIcon="phone"
							prefixIconStyle="color:white;"
							text
							color="white"
							:focus="true"
                            @blur="acvvv"
			  				v-model="loginform.userPhone"
			  				class="inputa"
			  				clearable
							:adjustPosition="false"
			  			/>  
			  		</u-form-item>
			  		
			  		<u-form-item  prop="userPassword" class="forma">
			  			<u-input placeholder="请输入密码"
							prefixIcon="lock"
							prefixIconStyle="color:white;"
							style=""
			  					v-model="loginform.userPassword"
							color="white"
			  				
			  				class="inputa"
			  				password
							:adjustPosition="false"
			  			/>
			  		</u-form-item>
			
			  		<u-button @click="login" class="buttona" :disabled="isDisabled" text="登录" ></u-button>
			  	</u-form>
			  </view>
			  <view class="endbox">
			  	<p class="pp">
			
			  		<span style="color: white;">忘记密码？</span>
			  		<span style="float: right;color: white;" @click="loginadd">新用户注册</span>
			  	</p>
			  </view>
			  <view style="width: 290px; margin: 0 auto;position: relative;bottom: -190px;">
			  	<p style="font-size: 8px;width: 290px;">
			  		<u-checkbox activeColor="#d7000f" shape="circle" style="float: left;margin-left: 11px;"></u-checkbox>
	
			  		<span style="color: white;">我已阅读并同意</span>
			  		<span style="color: whitesmoke;">《服务协议》</span>
			  		<span style="color: white;">和</span>
			  		<span style="color: whitesmoke;">《隐私政策》</span>
			  	</p>
			  </view>

	</view>
</template>
<script>
		export default {
			data() {
				return {
                    screenHeight: getApp().globalData.screenHeight,
					passwordIcon:"true",
					logosrc: '../../static/96x96.png',
					loginform:{
						userPhone:"",
						userPassword:""
					},
					// 登录校验
					rules:{
				
						userPhone:[{
							trigger:['change','blur'],	
						}],
					
						userPassword:[{
							trigger:['change','blur'],
						}]
					},
				}

			},
			methods:{
                    
                acvvv(){
                    var that = this
                    uni.request({
                        url:'http://'+that.$host+':'+that.$port+'/clientuser/queryByPhone',
                        data:{userPhone:that.loginform.userPhone},
                        method:'GET',
                        success(res) {
                            console.log(res.data);
                        }
                    })
                },
                login(){
                    var that = this
                    uni.request({
                        url:'http://'+that.$host+':'+that.$port+'/clientuser/AppLogin',
                        data:that.loginform,
                        method:'POST',
                        success(res) {
                            if(res.data.flag){
                                uni.setStorageSync("token",res.data.obj)
                                uni.request({
                                    url:'http://'+that.$host+':'+that.$port+'/clientuser/getLoginUser',
                                    data:uni.getStorageSync('token')+1,
                                    method:'POST',
                                    success(res) {
                                        if(res.data.flag){
                                            console.log(res.data);
                                            uni.setStorageSync("loginId",res.data.obj.id)
                                            uni.setStorageSync("userName",res.data.obj.userName)
                                            uni.setStorageSync("userAvatar",res.data.obj.imageId)
                                            uni.showToast({
                                                title:'登录成功'
                                            })
                                            
                                            uni.$u.sleep(1500).then(() => {
                                                uni.switchTab({
                                                    url:'/pages/index/index'
                                                })
                                            })
                                        }
                                    }
                                })
                            }else{
                                uni.$u.toast('密碼錯誤')
                            }
                        }
                    })
                },
				// 跳转到邮箱验证码登录
				verificationCode(){
					uni.navigateTo({
					  url:'/pages/login/appcodelogin',
					})
				},
				// 跳转到新用户注册
				loginadd(){
					uni.navigateTo({
					  url:'/pages/login/apploginadd'
					})
				},
			},
			mounted() {
				// 页面加载给.a_dl属性的div 附着 slide-up的动画效果
				  // this.$nextTick(() => {
				  //   const boxElement = document.querySelector('.a_dl')
				  //   boxElement.classList.add('slide-up')
				  // });
			},
			  computed: {
			    isDisabled() {
			
			    
			      return this.loginform.userPhone === '' || this.loginform.userPassword === ''
			    }
			}
		}
</script>

<style scoped>
    .bodybox{
     background: linear-gradient(1501deg, #f37f8a,#d7000f,#ee315a);
          	    background-size: 400% 400%;
          		animation: page 5s ease infinite;
          	    backdrop-filter: blur(10px);
  		margin: 0;
  		padding: 0.1px;
  		/* background-image: url("../../static/apbg2.jpg"); */
  		/* background: linear-gradient(to bottom right, red, white)no-repeat; */
  	    /* background: linear-gradient(40deg,#d7000f,white); */
  		background: linear-gradient(1501deg, #f37f8a,#d7000f,#ee6d85);
  	    background-size: 400% 400%;
  		animation: page 5s ease infinite;
  	    backdrop-filter: blur(10px);
    }

	@keyframes page{
			0% {
				background-position: 0% 50%;
			}
			50% {
				background-position : 100% 50%;
			}
			100% {
				background-position: 0% 50%;
			}  
	}
	.logobox{
		width: 100px;
		height: 100px;
		/* background-color: rebeccapurple; */
		margin: 0 auto;
	}
	.a_dl{
		width: 290px;
		height: 195px;
		/* background-color: rebeccapurple; */
		margin: 0px auto;
		/* margin-top: 100px; */
	}
	.endbox{
		width: 290px;
		/* background: red; */
		margin: 0 auto;
	}
	.inputa{
		border: none;
		color: white;
		/* background-color: yellow; */
		border-bottom: 2px solid white !important;
	}
	.buttona{
		color: #d7000f;
		background-color: white;
		/* border-radius: 20px; */
		margin-top: 15px;
	}
	.forma{
		height: 65px;
		/* background-color: yellow; */
	}
	.u-form-item /deep/ .u-form-item__body__right__message{
		position: relative;
		left: -35px;
		text-align: left;
	}
	.slide-up {
		animation: slide-up 0.5s ease-in-out forwards;
	}
	@keyframes slide-up {
	  to {
		width: 290px;
	  }
	}
	.pp span{
		font-size: 14px;
		/* color: #ABADAE; */
		color: black;
	}
</style>